<template>
  <div class="wrapper">
    <div class="header">
      <h2 class="header__title">我的订单</h2>
    </div>
    <div class="productorders">
      <ul class="productorders__list">
        <li
          class="productorders__list__item"
          v-for="(item, index) in list"
          :key="index"
        >
          <p class="productorders__list__item__v1">
            <span class="productorders__list__item__v1__name">{{
              item.shopName
            }}</span>
            <span class="productorders__list__item__v1__cancel">{{
              item.isCanceled ? '已取消' : '已下单'
            }}</span>
          </p>
          <div class="productorders__list__item__v2">
            <div class="productorders__list__item__v2__pic">
              <template
                v-for="(innerItem, innerIndex) in item.products"
                :key="innerIndex"
              >
                <img
                  :src="innerItem.product.img"
                  alt=""
                  v-if="innerIndex <= 3"
                />
              </template>
            </div>
            <div class="productorders__list__item__v2__info">
              <span class="productorders__list__item__v2__info__price">¥{{item.totalPrice}}</span>
              <span class="productorders__list__item__v2__info__count"
                >共{{ item.totalNumber }}件</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <Docker :currentIndex="2" />
</template>

<script>
import Docker from '../../components/Docker.vue'
import { reactive, toRefs } from 'vue'
import { get } from '../../utils/request'

// 处理订单列表逻辑
const useOrderListEffect = () => {
  const data = reactive({ list: [] })
  const getNearShopList = async () => {
    const result = await get('/api/order')
    if (result?.errno === 0 && result?.data?.length) {
        const orderList = result.data
        orderList.forEach((order) => {
            const products = order.products || []
            let totalPrice = 0
            let totalNumber = 0
            products.forEach((productItem) => {
                totalNumber += (productItem?.orderSales || 0)
                totalPrice += ((productItem?.product?.price * productItem?.orderSales) || 0)
            })
            order.totalPrice = totalPrice
            order.totalNumber = totalNumber
        })
      data.list = result.data
    }
  }
  getNearShopList()
  const { list } = toRefs(data)
  return { list }
}

export default {
  name: 'OrderList',
  components: { Docker },
  setup() {
    const { list } = useOrderListEffect()
    return { list }
  },
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.wrapper {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  padding: 0 0.18rem;
  background-color: $cartList-bgcolor;
  .header {
    height: 0.44rem;
    margin: 0 -0.18rem;
    background-color: $content-fzcolor;
    &__title {
      width: 100%;
      font-size: 0.16rem;
      color: $content-fontcolor;
      line-height: 0.44rem;
      text-align: center;
    }
  }
  .productorders {
    margin-top: 0.16rem;
    &__list {
      &__item {
        height: 1.1rem;
        margin-bottom: 0.16rem;
        background: $content-fzcolor;
        border-radius: 0.04rem;
        &__v1 {
          display: flex;
          justify-content: space-between;
          padding: 0.16rem 0.16rem 0.08rem 0.16rem;
          &__name {
            font-size: 0.16rem;
            color: $content-fontcolor;
            line-height: 0.22rem;
          }
          &__cancel {
            font-size: 0.14rem;
            color: $orderCencel-color;
            text-align: right;
          }
        }
        &__v2 {
          display: flex;
          justify-content: space-between;
          padding: 0.08rem 0.16rem 0.16rem 0.16rem;
          &__pic {
            height: 0.4rem;
            display: flex;
            & img {
              width: 0.4rem;
              height: 0.4rem;
              vertical-align: middle;
              margin-right: 0.12rem;
            }
            & img:last-child {
              margin-right: 0;
            }
          }
          &__info {
            width: 0.46rem;
            display: flex;
            flex-wrap: wrap;
            & span {
              width: 100%;
              text-align: right;
            }
            &__price {
              font-size: 0.14rem;
              color: #e93b3b;
            }
            &__count {
              font-size: 0.12rem;
              color: $content-fontcolor;
              line-height: 0.14rem;
            }
          }
        }
      }
    }
  }
}
</style>